<template>
    <div>
        <h2>
            预约记录管理
        </h2>
        <!-- 弹出层 -->
        <el-dialog v-model="dialogTableVisible" @open="open(numberId)" title="用户信息">
            <el-card class="box-card">
                <div class="text item">用户ID: {{ userinfo[_id] }}</div>
                <div class="text item">用户账号： {{ userinfo.username }}</div>
                <div class="text item">用户姓名： {{ userinfo.fullname }}</div>
                <div class="text item">用户昵称： {{ userinfo.nickname }}</div>
                <div class="text item">用户头像： {{ userinfo.headerimg }}</div>
                <div class="text item">用户性别： {{ userinfo.sex }}</div>
                <div class="text item">用户年龄： {{ userinfo.age }}</div>
            </el-card>
        </el-dialog>
        <div>
            <!-- 预约记录 -->
            <el-table :data="tableData" height="450" style="width: 100%">
                <el-table-column prop="id" label="预约ID" width="280" />
                <el-table-column prop="nickname" label="预约人" width="160" />
                <el-table-column prop="time" label="预约时间" width="240" />
                <el-table-column prop="operate" label="状态" width="200">
                    <el-button @click="changeHandle">未处理</el-button>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <el-button @click="seeInfo(scope.row.id)">查看预约人信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { yY, queryUser } from '../../../api';

// 预约记录信息存储
const tableData = ref([])

//人物信息存储
let userinfo = ref<any>({})

// 遮罩层控制
let dialogTableVisible = ref(false)

// 获取预约记录
yY().then(res => {

    let arr = res.data.data
    tableData.value = arr
})

// 预约用户id
const numberId = ref('0')

// 打开遮罩层
const seeInfo = (id: string) => {
    dialogTableVisible.value = true
    numberId.value = id
}

// 开启获取用户数据
const open = (id: string) => {
    queryUser(id).then(res => {
        userinfo.value = res.data.info
    })
}

// 处理
const changeHandle = (e) => {
    console.log(e.target);
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>